<template>
	<view class="goodlist" v-if="dataBuffer">
		<!-- head区域 -->
		<view class="head">
			<view class="search">
				<u-search :disabled="true" @click="goSearch" shape="square" :show-action="true" action-text="搜索"
					:animation="true" margin="10rpx 0rpx">
				</u-search>
			</view>
			<view class="sortbox">
				<view class="sort">
					<view hover-class="touchOpacity">综合排序</view>
					<view hover-class="touchOpacity">销量</view>
					<view hover-class="touchOpacity" @click="pricesort">
						<text>价格</text>
						<image src="../../static/icon/sort.png"></image>
					</view>
					<view hover-class="touchOpacity">好评度</view>
					<view hover-class="touchOpacity">店铺</view>
				</view>
				<view class="filter" hover-class="touchOpacity">
					<image src="../../static/icon/filter.png"></image>
					<text>筛选</text>
				</view>
			</view>
		</view>

		<!-- 提示标语区域 -->
		<view class="biaoyu" hover-class="touchOpacity">
			<u-notice-bar mode="vertical" :list="list" :show="true" :close-icon="true"></u-notice-bar>
		</view>

		<!-- 商品列表区域 -->
		<view class="list">
			<view class="row" v-for="(item,index) in goodlist" :key="index" @click="goGoodDesc(item.id)">
				<!-- 执行图片赖加载 此处注意百度小程序问题需要指定固定高度-->
				<view class="image">
					<u-lazy-load :key="index" :image="item.img" height="218"></u-lazy-load>
				</view>
				<view class="info" hover-class="touchOpacity">
					<text>{{item.goodsname}}</text>
					<view class="money">
						<text>￥ {{item.market_price}}</text> <text>￥{{item.price}}</text>
					</view>
					<text>双11.11限制200起</text>
					<text space="ensp">3565评论 99%好评</text>
				</view>
			</view>
		</view>

		<!-- 底部悬浮球 -->
		<view v-if="topBuffer" class="quick_top" hover-class="touchOpacity" @click="toTop()">
			<image src="../../static/icon/totop.png"></image>
		</view>
	</view>
	<view v-else>
		<!-- 无数据提示 -->
		<u-empty text="暂无数据~~去逛逛~~" mode="list" :show="!dataBuffer" color="orange" icon-color="orange"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value2: '',
				list: [
					'筛选11.11大促商品,亲,请速速赶来',
					'筛选11.11大促商品,亲,请速速赶来',
				],
				show: false,
				mode: 'right',
				mask: true, // 是否显示遮罩
				closeable: true,
				closeIconPos: 'top-right',
				topBuffer: false, //控制悬浮球显示
				dataBuffer: true,
				goodlist: [],
				type: '',
				cateid: '',
				page: 1,
				size: 5,
				totalPage: 0
			}
		},

		onLoad(option) {
			// console.log(option);
			this.type = option.type
			this.cateid = option.cateid

			this.getGoodsList()
		},

		//监听下拉触底（加载第二页的数据）
		onReachBottom() {
			if (this.page < this.totalPage) {
				this.$tool.load('正在加载中...')
				setTimeout(() => {
					++this.page;
					this.getGoodsList()
				}, 500)
			} else {
				this.$tool.tip('已经没有更多啦~')
			}
		},

		//监听上拉刷新(即清空重置数据重新请求)
		onPullDownRefresh() {
			// console.log(111);
			this.$tool.load('正在刷新中...')
			setTimeout(() => {
				this.page = 1;
				this.goodlist = [],
					this.getGoodsList()
			}, 500)
		},

		//监听页面滚动
		onPageScroll(info) {
			// console.log(info);
			if (info.scrollTop > 200) {
				this.topBuffer = true
			} else {
				this.topBuffer = false
			}
		},

		methods: {
			// 跳转到搜索页面
			goSearch() {},

			// 价格筛选事件
			pricesort() {
				uni.showActionSheet({
					itemList: ['升序', '降序']
				})
			},

			//商品列表数据
			getGoodsList() {
				this.$http({
					url: "getgoodlist",
					data: {
						cateid: this.cateid,
						page: this.page,
						size: this.size,
						type: this.type
					}
				}).then(res => {
					// console.log(res.list);
					let {
						totalPage,
						goodData
					} = res.list
					if (totalPage == 0) {
						this.dataBuffer = false
					} else {
						//处理图片路径
						goodData.forEach(m => m.img = this.$URL + m.img)
						this.totalPage = totalPage
						//拼接之前拿到的数据
						this.goodlist = this.goodlist.concat(goodData)
					}
				})
				//关闭加载提示
				this.$tool.hideLoad()
				//关闭刷新动画
				uni.stopPullDownRefresh()
			},

			//回到顶部
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0, //置顶位置
					duration: 10 //滚动动画时长
				})
			},
			
			//跳转到商品详情页
			goGoodDesc(id){
				uni.navigateTo({
					url:"../gooddesc/gooddesc?id="+id
				})
			}
		}


	}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/goodlist.css");
</style>
